<template>
  <div>
    <XTable :tableList="tableList" :tableData="tableData">
      <template v-slot:btn="{ row, index }">
        <el-button size="mini" type="primary" @click="show(row)">详情</el-button>
        <el-button size="mini" type="danger" @click="$message(`删除下标为 ${JSON.stringify(index)} 的数据`)">删除</el-button>
      </template>
    </XTable>
    <el-dialog title="详情" :visible.sync="showDrawer">
      <div>该行数据：{{tempRow}}</div>
    </el-dialog>
  </div>
</template>

<script>
import { XTable } from '@/components/@fhsy/x-tool'
export default {
  components: { XTable },
  data: () => ({
    tableList: [
      { label: '序号', type: 'XNumber', width: 200, align: 'center' },
      { label: '日期', prop: 'date', width: 200 },
      { label: '姓名', prop: 'name' },
      { label: '地址', prop: 'address' },
      { label: '操作', width: 300, align: 'center', slot: 'btn' }
    ],
    tableData: [
      { id: 11, date: '2020-05-02', name: '白羊', address: '上海市杨浦区政立路 1 号' },
      { id: 12, date: '2020-06-04', name: '白羊', address: '上海市杨浦区政立路 2 号' },
      { id: 13, date: '2020-07-01', name: '白羊', address: '上海市杨浦区政立路 3 号' },
      { id: 14, date: '2020-08-03', name: '白羊', address: '上海市杨浦区政立路 477 号' }
    ],
    showDrawer: false,
    tempRow: {}
  }),
  methods: {
    show (row) {
      this.tempRow = row
      this.showDrawer = true
    }
  }
}
</script>
